<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ztree li span.button.pIcon01_ico_open{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_open.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
			.ztree li span.button.pIcon01_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_close.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
			.ztree li span.button.pIcon02_ico_open, .ztree li span.button.pIcon02_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/2.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
			.ztree li span.button.icon01_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
			.ztree li span.button.icon02_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
			.ztree li span.button.icon03_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
			.ztree li span.button.icon04_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
			.ztree li span.button.icon05_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
			.ztree li span.button.icon06_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
		</style>
		<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" />
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script type="text/javascript" src="../js/jquery.js"></script>
		<!--<script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>-->
		<script type="text/javascript" src="jquery.ztree.core.min.js" ></script>
		<script>
			var zTreeObj;
			// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
			var setting = {
				data: {
				simpleData: {
					enable: true
				}
			}
				/*view:{showLine :false},
				data:
					{
					simpleData:
						{
							enable:false,
							idKey:"id",
							pIdKey:"pId",
							rootPId:null
						}
					}*/
			};
			// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
			var zNodes =[
			{ id:1, pId:0, name:"展开、折叠 自定义图标不同", open:true, iconSkin:"pIcon01"},
			{ id:11, pId:1, name:"叶子节点1", iconSkin:"icon01"},
			{ id:12, pId:1, name:"叶子节点2", iconSkin:"icon02"},
			{ id:13, pId:1, name:"叶子节点3", iconSkin:"icon03"},
			{ id:2, pId:0, name:"展开、折叠 自定义图标相同", open:true, iconSkin:"pIcon02"},
			{ id:21, pId:2, name:"叶子节点1", iconSkin:"icon04"},
			{ id:22, pId:2, name:"叶子节点2", iconSkin:"icon05"},
			{ id:23, pId:2, name:"叶子节点3", iconSkin:"icon06"},
			{ id:3, pId:0, name:"不使用自定义图标", open:true },
			{ id:31, pId:3, name:"叶子节点1"},
			{ id:32, pId:3, name:"叶子节点2"},
			{ id:33, pId:3, name:"叶子节点3"}
		];
			$(document).ready(function() {
				zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
				
				zTreeObj.selectNode(zTreeObj.getNodeByParam("id",22, null)); 
			});
			
		</script>
	</head>

	<body>
		<button type="submit">xx</button>
		<button type="button">oo</button>
		<input data-options="a:22,b:456" />
		<div class="tree-left"> 
		   <ul id="treeDemo" class="ztree" data-url="${ctx}/system/code/tree"></ul>
		</div>
	</body>

</html>